<canvas id="myCanvas" width="800" height="450"></canvas>

<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');

  // 设置渐变背景
  function drawBackground() {
    var gradient = ctx.createRadialGradient(400, 225, 0, 400, 225, 300);
    gradient.addColorStop(0, 'rgba(0, 0, 0, 0.8)');
    gradient.addColorStop(1, 'rgba(0, 0, 0, 1)');

    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }

  // 绘制地图边界轮廓（此处用简单的轮廓线代替实际地图）
  function drawMapOutline() {
    ctx.strokeStyle = '#00C0FF';
    ctx.lineWidth = 2;
    ctx.beginPath();
    // 这里绘制一个简单的多边形，模拟地理轮廓
    ctx.moveTo(200, 100);
    ctx.lineTo(300, 50);
    ctx.lineTo(350, 150);
    ctx.lineTo(250, 200);
    ctx.closePath();
    ctx.stroke();
  }

  // 绘制光圈效果
  function drawLightEffect() {
    var gradient = ctx.createRadialGradient(400, 225, 0, 400, 225, 300);
    gradient.addColorStop(0, 'rgba(147, 235, 248, 0.6)');
    gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');

    ctx.fillStyle = gradient;
    ctx.beginPath();
    ctx.arc(400, 225, 300, 0, Math.PI * 2, false);
    ctx.fill();
  }

  // 绘制动态光圈
  var angle = 0;
  function animateLight() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBackground();
    drawMapOutline();
    drawLightEffect();

    ctx.save();
    ctx.translate(400, 225);
    ctx.rotate(angle);
    ctx.translate(-400, -225);
    angle += 0.01;
    ctx.restore();

    requestAnimationFrame(animateLight);
  }

  animateLight();
</script>
